import "./List.css"
import 'antd/dist/antd.css';
import React from 'react'
import "../../assets/icon/iconfont.css"
import { Table, Popconfirm, message, Button } from 'antd';
import axios from 'axios'
import Mask from "./mask"
import Add from "./add"
// import { Table, Switch, Radio, Form, Space } from 'antd';



const expandable = { expandedRowRender: record => <p>{record.description}</p> };
const title = () => 'Here is title';
const showHeader = true;
const pagination = { position: 'bottom' };



class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      bordered: false,
      loading: false,
      pagination,
      size: 'default',
      //   expandable,
      title: undefined,
      showHeader,
      rowSelection: {},
      scroll: undefined,
      hasData: true,
      tableLayout: undefined,
      top: 'none',
      bottom: 'bottomRight',
    };
  }

  handleToggle = prop => enable => {
    this.setState({ [prop]: enable });
  };

  handleSizeChange = e => {
    this.setState({ size: e.target.value });
  };

  handleTableLayoutChange = e => {
    this.setState({ tableLayout: e.target.value });
  };

  handleExpandChange = enable => {
    this.setState({ expandable: enable ? expandable : undefined });
  };

  handleEllipsisChange = enable => {
    this.setState({ ellipsis: enable });
  };
  handleTitleChange = enable => {
    this.setState({ title: enable ? title : undefined });
  };

  handleHeaderChange = enable => {
    this.setState({ showHeader: enable ? showHeader : false });
  };



  handleRowSelectionChange = enable => {
    this.setState({ rowSelection: enable ? {} : undefined });
  };

  handleYScrollChange = enable => {
    this.setState({ yScroll: enable });
  };

  handleXScrollChange = e => {
    this.setState({ xScroll: e.target.value });
  };

  handleDataChange = hasData => {
    this.setState({ hasData });
  };

  render() {
    const { xScroll, yScroll, ...state } = this.state;

    const scroll = {};
    if (yScroll) {
      scroll.y = 240;
    }
    if (xScroll) {
      scroll.x = '100vw';
    }

    const tableColumns = this.props.state.columns.map(item => ({ ...item, ellipsis: state.ellipsis }));
    if (xScroll === 'fixed') {
      tableColumns[0].fixed = true;
      tableColumns[tableColumns.length - 1].fixed = 'right';
    }

    return (
      <>
        <Table
          {...this.state}
          pagination={{ position: [this.state.top, this.state.bottom] }}
          columns={tableColumns}
          dataSource={state.hasData ? this.props.state.data : null}
          scroll={scroll}
        />
      </>
    );
  }
}


export default class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      dataAlone:{},
      dataCopy: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'key',
        },
        {
          title: '省份',
          dataIndex: 'sheng',
        },
        {
          title: '投资总额',
          dataIndex: 'zong',
          sorter: (a, b) => a.zong - b.zong,
        },
        {
          title: '收益总额',
          dataIndex: 'shou',
          sorter: (a, b) => a.shou - b.shou,
        },
        {
          title: '主要投资项目',
          dataIndex: 'xiangmu',
          // ascend | descend
        },
        {
          title: '投资周期',
          dataIndex: 'zhou',
        },
        {
          title: '投资人数',
          dataIndex: 'ren',
        },
        {
          title: '操作',
          dataIndex: 'do',
          render: (text, record, index) => (
            <div>
              <Button type="primary" className="button" onClick={() => this.edit(record)}>修改</Button>
              <Popconfirm placement="top" title="是否确认产出该列？" onConfirm={() => { this.delete(record.id) }} okText="Yes" cancelText="No">
                <Button type="danger" className="button" >删除</Button>
              </Popconfirm>
            </div>
          ),
        }],
      text: "",
    }
  }


  componentDidMount() {
    axios({
      url: "http://10.35.166.207:8088/search"
    }).then((res)=>{
      res.data.forEach((item, index) => {
        item.key = index + 1
      })
      this.setState({
        data: res.data,
        dataCopy: res.data
      })
    }
    )

    
    // console.log("this.pass.state",this.pass.st)
  }
  //ul点击改变类名
  changeClass(ev) {
    let li = document.getElementsByTagName("li");
    let i = document.getElementsByTagName("i");
    let span = document.querySelectorAll("#head span");
    li = { ...li }
    for (let i = 0; i < 8; i++) {
      li.[i].className = ""
      span.[i].className = ""
    }
    let iTarget = ev.currentTarget.getElementsByTagName("i")
    let spanTarget = ev.currentTarget.getElementsByTagName("span")
    iTarget = { ...iTarget }.[0]
    spanTarget = { ...spanTarget }.[0]
    iTarget.className = iTarget.className + " change"
    spanTarget.className = "change"
    ev.currentTarget.className = "afterclick"
  }


  //删除按钮
  async delete(id) {
    let res = await axios({
      url: "http://10.35.166.207:8088/qushan",
      params: {
        id: id,
      }
    })
    // res.data.forEach((item,index) => {
    //   item.key = index +1
    // });
    //发送请求
    if (res.data == "shan") {
      let arr = this.state.data
      arr = arr.filter((item) => {
        return item.id != id
      }
      )
      arr.forEach((item, index) => {
        item.key = index + 1
      })
      this.setState({
        data: [...arr]
      })
    }
  }
  //筛选
  textChange(event) {
    this.setState({
      text: event.target.value,
    })
  }
  pick() {
    let arr = this.state.data
    if (!this.state.text) {
      let arr2 = this.state.dataCopy
      this.setState({
        data: arr2,
      })
    } else {
      arr = arr.filter((item) => {
        return item.sheng == this.state.text
      })
      this.setState({
        data: arr,
      })
    }
  }
  //批量删除
  removeAll() {
    let trList = document.querySelectorAll("tr")
    let all = { ...trList }
    let arr = []
    for (let item in all) {
      arr.push(all.[item])
    }
    //判断第一个tr全选是否选中.className)
    if (arr[0].querySelector('.ant-checkbox').className == "ant-checkbox ant-checkbox-checked") {
    }
    else {
      for (let i = 1; i < arr.length; i++) {
        // console.log(arr[i])
        // console.log(arr[i].querySelector('.ant-checkbox'))
        if (arr[i].querySelector('.ant-checkbox').className == "ant-checkbox ant-checkbox-checked") {
          console.log(arr[i])
        }
      }
    }
  }
  //编辑
  edit(hang){
    this.pass1.id=""
    this.setState({
      dataAlone:hang
    })
  }
   //添加
   add(){
    // console.log(console.log(this.pass1))
    this.pass2.id=""
  }
  async addUpdate(){
    let res = await axios({
      url: "http://10.35.166.207:8088/search"
    })

    res.data.forEach((item, index) => {
      item.key = index + 1
    });
    this.setState({
      data: res.data,
      dataCopy: res.data
    })
  }

  render() {
    return (
      <div id="box">
        <div id="content">
          <div id="search">
            <div>
              <input type="text" placeholder="省份" value={this.state.text} onChange={(ev) => this.textChange(ev)} />
              <Button type="primary" onClick={() => this.pick()}>筛选</Button>
            </div>
            <div>
              <Button type="primary" onClick={() => this.add()}>添加</Button>
            </div>

          </div>
          <ul id="head">
            <li className="afterclick" onClick={(ev) => this.changeClass(ev)}><i className="iconfont icon-xiazai change"></i><span className="change ">华东地区</span></li>
            <li onClick={(ev) => this.changeClass(ev)}><i className="iconfont icon-touzilicai"></i><span>华南地区</span></li>
            <li onClick={(ev) => this.changeClass(ev)}><i className="iconfont icon-error-fill"></i><span>华中地区</span></li>
            <li onClick={(ev) => this.changeClass(ev)}><i className="iconfont icon-rili"></i><span>华北地区</span></li>
            <li onClick={(ev) => this.changeClass(ev)}><i className="iconfont icon-weibiaoti-"></i><span>西北地区</span></li>
            <li onClick={(ev) => this.changeClass(ev)}><i className="iconfont icon-xiazai"></i><span>西南地区</span></li>
            <li onClick={(ev) => this.changeClass(ev)}><i className="iconfont icon-qian"></i><span>东北地区</span></li>
            <li onClick={(ev) => this.changeClass(ev)}><i className="iconfont icon-shezhi"></i><span>台港澳地区</span></li>
          </ul>
          <div id="table">
            <Demo state={this.state} />
          </div>
        </div>
        <div ref={mark1 =>( this.pass1 = mark1)} id="hidden1">
          <Mask cancel1 = {this.pass1} data={this.state.dataAlone}  fn={()=>this.addUpdate()}/>
        </div>
        <div ref={mark2 =>( this.pass2 = mark2)} id="hidden2">
          <Add cancel2 = {this.pass2} fn={()=>this.addUpdate()}/>
        </div>
      </div>
    );
  }
}

